import React, {Component} from 'react';
import './OfficialList.css';
import {Link} from "react-router-dom";

class OfficialList extends Component {

	render() {

		return (
			<ul className='officialList'>
				{
					this.props.officialList.map((item, index) => {
						return (
								<Link to={'/recommend/' + item.id} className="official" key={item.id}>
									<div className="imgContainer">
										<img src={item.coverImgUrl} alt=""/>
										<div className="updateTime">{item.updateFrequency}</div>
									</div>
									<ul className="desc">
										{item.tracks.map((v, i) => <li key={i}>{i + 1}. {v.first} - {v.second}</li>)}
									</ul>

								</Link>
						)
					})
				}
			</ul>
		);
	}
}

export default OfficialList;